<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>所有角色的展示</title>
		<script type="text/javascript" src="js/vue.js"></script>
		<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
		
		<script type="text/javascript" src="js/ajax.js"></script>
		<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
		<style type="text/css">
			#rolelist{
				width:500px;
				margin: auto;

			}
			#rolelist td{
				text-align: center;
				border: 1px gray solid;
			}
		</style>
	</head>
	<body>
		<table id="rolelist" cellspacing="1" cellpadding="0">
			<tr>
				<td>角色ID</td>
				<td>角色名称</td>
				<td>用户数</td>
				<td colspan="2"><input type="button"   value="新增" v-on:click="add"/></td>
			</tr>
			<tr v-for="role in roles"  >
				<td >{{role.id}}</td>
				<td >{{role.name}}</td>
				<td>{{role.userCount}}</td>
				<td><input type="button"   value="修改" v-on:click="updateRole(role.name)" /></td>
				<td><input type="button"   value="删除" v-on:click="deleteRole(role.id)" /></td>
			</tr>
		</table>
	</body>
	<script>
	
	    
	    window.onload = function(){
			var vue = new Vue({
				
				el:"#rolelist",
				data:{
					
					roles:{},
				},
				methods:{
					get:function(){
					
						var url = "http://localhost:8080/attendance-service/fangyahao/role";
						var data={
							flag:"all"
						}
						getsend(url,data,function(rs){
							console.log(rs)
							if(rs.message=="success"){
								vue.roles = rs.data;
							}else{
								window.location.href="404.html";
							}
							
						});
					},
					
					add:function(){
						window.location.href="addRole.html";
					},
					deleteRole:function(id){
						var url = "http://localhost:8080/attendance-service/fangyahao/role";
						var data={
							flag:"delete",
							id:id
						}
						postsend(url,data,function(rs){
							console.log(rs);
							if(rs.data!=0){
								window.location.reload();
							}
						})
						
					},
					updateRole:function(name){
						window.location.href="updateRole.html";
						window.localStorage.setItem("name",name);
					},
					
				}
			});
		    vue.get();
		
		}
		
	</script>
</html>
